<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买快递回收</el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>




		<el-row style="margin-top: 20px;">
			<el-form :inline="true">


				<el-form-item label="驿站名称">
					<el-input clearable @clear="querymendianList" v-model="queryInfo.courierStationName"
						placeholder="请输入驿站名称"></el-input>
				</el-form-item>

				<el-form-item label="小区名称">
					<el-input clearable @clear="querymendianList" v-model="queryInfo.communityName"
						placeholder="请输入小区名称"></el-input>
				</el-form-item>


				<el-form-item label="提交时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dataValue" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="querymendianList">搜索</el-button>

				</el-form-item>


				<div><el-button type="success" @click="addmendian">新增驿站</el-button></div>

			</el-form>
		</el-row>




		<!-- 表格区域 -->
		<el-table stripe :data="shopList" boder style="width: 100%">
			<el-table-column prop="courierStationId
" label="ID">
			</el-table-column>
			<el-table-column prop="courierStationName" label="驿站名字">
			</el-table-column>
			<el-table-column prop="courierStationImage" label="驿站照片">
			</el-table-column>
			<el-table-column prop="courierStationAddress" label="驿站地址">
			</el-table-column>

			<el-table-column prop="courierStationCommunityName
" label="所在小区">
			</el-table-column>
			<el-table-column prop="courierStationOrderCount" label="订单总数">
			</el-table-column>
			<el-table-column prop="addTime" label="添加时间">
			</el-table-column>
			<el-table-column prop="courierStationStatus" label="状态">
				<template slot-scope="scope">
					<el-button v-if="scope.row.courierStationStatus==1" type="success" plain>上架状态</el-button>
					<el-button v-if="scope.row.courierStationStatus==0" type="warning" plain>下架状态</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link type="success" @click="xiugai(scope.row)">编辑驿站</el-link>
				</template>
				<template slot-scope="scope">
					<el-link v-if="(scope.row.courierStationStatus==0)" type="success"
						@click="xiajia(scope.row)">立即上架</el-link>
					<el-link v-if="(scope.row.courierStationStatus==1)" type="danger"
						@click="xiajia(scope.row)">立即下架</el-link>
				</template>
			</el-table-column>
		</el-table>



		<!-- 页码分页 -->
		<!-- current-page要访问的页码，page-sizes每页展示的条数，page-size -->
		<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			:total="total">
		</el-pagination>

		<!-- 新增对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form>
				<el-form-item label="门店名称" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.courierStationName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="驿站图片" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.courierStationImage" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" :label-width="formLabelWidth">
					<el-cascader v-model="addressarr" :options="cityy"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.courierStationAddress" placeholder="请输入详细地址"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属小区" :label-width="formLabelWidth">
					 <el-select v-model="vvv" placeholder="请选择">
					    <el-option
					      v-for="item in shopList"
					      :key="item.courierStationId"
					     
					      :value='item.courierStationCommunityName+item.courierStationCommunityName'
>
					    </el-option>
					  </el-select>


				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quedinganniu">确认保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import city from '../assets/citydata.js'
	export default {
		// 数据
		data() {
			return {
vvv:'',
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					courierStationName: '',
					communityName: '',
					courierStationStatus: '',
					startTime: '',
					endTime: '',
				},

			
				httpma: '',
				dataValue: '',
				total: 1,
				shopList: [],
				title: '添加',
				dialogFormVisible: false,
				formLabelWidth: '120px',
				shopaddxinxi: {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: "",
				},
				addressarr: [],
				cityy: city,
				



			}
		},




		// 方法
		methods: {
			
			xiajia(e) {
				if (e.courierStationStatus == 1) {
					e.courierStationStatus = 0

				} else {
					e.courierStationStatus = 1


				}
				this.$http.post('courierStation/modifyCourierStation', {
					courierStationId: e.courierStationId,
					courierStationStatus: e.courierStationStatus

				}).then((resp) => {

					this.$message.success('正确')
				})
			},




			// 修改门店资料
			xiugai(e) {

				this.dialogFormVisible = true
				this.title = '修改'
				this.shopaddxinxi = e
				this.addressarr = [this.shopaddxinxi.courierStationProvince, this.shopaddxinxi.courierStationCity, this
					.shopaddxinxi.courierStationDistrict

				]
				this.httpma = 'courierStation/modifyCourierStation'
			},








			// 获得经纬度方法
			getjingweidu() {
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
					params: {
						key: '457886b5972a97e93fb9cdccebfd450f',
						address: this.shopaddxinxi.shopProvince + this.shopaddxinxi.shopCity + this.shopaddxinxi
							.shopDistrict + this.shopaddxinxi.shopAddress

					}
				}).then((resp) => {
					let jingweidu = resp.data.geocodes[0].location
					this.shopaddxinxi.shopLatitude = jingweidu.split(',')[0]
					this.shopaddxinxi.shopLongitude = jingweidu.split(',')[1]

					this.$message.success('成功')
				})
			},






			// 获取添加信息方法
			quedinganniu() {
				this.$http.post(this.httpma, this.shopaddxinxi).
				then((resp) => {
					if (resp.data.status == 200) {
						this.$message.success(resp.data.message)
						this.querymendianList()
						this.shopaddxinxi = {
							courierStationAddress: "",
							courierStationCity: "",
							courierStationCommunityId: "",
							courierStationDistrict: "",
							courierStationImage: "",
							courierStationName: "",
							courierStationProvince: "",
						}
						this.dialogFormVisible = false
					} else {
						this.$message.error('操作失败')
					}
				})
			},

			// 新增按钮
			addmendian() {
				this.dialogFormVisible = true
				this.title = '添加'
				this.httpma = 'courierStation/addCourierStation'
			},




			// 每页显示数量发生改变时触发
			handleSizeChange(val) {
				// 更改请求参数中的pageSize
				this.queryInfo.pageSize = val
				// 设置当改变后默认访问第一页
				this.queryInfo.pageNum = 1
				// 重新查询数据
				this.querymendianList()
			},



			// 页码发生改变时触发
			handleCurrentChange(num) {
				this.queryInfo.pageNum = num
				// 重新查询数据
				this.querymendianList()
			},

			// 查询数据方法
			querymendianList() {
				this.$http.get('courierStation/querySearchCourierStationList', {
					params: this.queryInfo
				}).then((resp) => {
					if (resp.data.status == 200) {
						this.shopList = resp.data.data.list
						this.total = resp.data.data.total
					} else {
						this.$message.error('数据获取异常')
					}
				})
			},


		},




		//开始的钩子函数 
		mounted() {
			this.querymendianList()
		




		},




		// 监听器
		watch: {
			dataValue(newValue, oldValue) {
				this.queryInfo.startTime = newValue[0]
				this.queryInfo.endTime = newValue[1]
			},


			// 当身份信息改变时，进行赋值
			addressarr() {
				this.shopaddxinxi.courierStationProvince = this.addressarr[0]
				this.shopaddxinxi.courierStationCity = this.addressarr[1]
				this.shopaddxinxi.courierStationDistrict = this.addressarr[2]
			}

		},




	}
</script>

<style>

</style>